import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';
import { getImgUrl } from '../../../../utils/ComFunction'
import AsyncImage from '../../../../components/image/AsyncImage'

const screenW = Dimensions.get('window').width;

const SCROLLVIEW_DIRECTION_LEFT = 0;     //表示ScrollView组件往左滚动
const SCROLLVIEW_DIRECTION_RIGHT = 1;   //表示ScrollView组件往右滚动

export default class CarImagesBox extends Component {

    constructor(props) {
        super(props);
        this.state = {
            carPics: this.props.carPics,
            currentImg: 1,
            offetX: 0,
            scrollViewStartOffsetX: 0,//用于记录手指开始滑动时ScrollView组件的X轴偏移量，通过这个变量可以判断滚动方向
            scrollViewScrollDirection: SCROLLVIEW_DIRECTION_RIGHT,//ScrollView组件滚动的方向：0往左；1往右
        }
    };

    render() {
        return (
            <View style={styles.imglistbox} ref='carPics'>
                <ScrollView
                    horizontal={true}
                    pagingEnabled={true}
                    scrollEventThrottle={100}//100ms刷新一次
                    onScroll={this._onScroll.bind(this)}
                    onScrollBeginDrag={this._onScrollBeginDrag.bind(this)}
                    onMomentumScrollEnd={(e) => this.onAnimationEnd(e)}
                    showsHorizontalScrollIndicator={false}
                >
                    {this.props.carPics && this.props.carPics.map((item, index) => {
                        return (
                            <TouchableOpacity
                                activeOpacity={1.0}
                                key={index}
                                onPress={this.morepic.bind(this, index)}>
                                <View style={styles.imgbox} key={index}>
                                    {
                                        //加载三张图
                                        (this.state.offetX + 2 * screenW >= index * screenW && this.state.scrollViewScrollDirection == SCROLLVIEW_DIRECTION_RIGHT) || (this.state.offetX - 2 * screenW <= index * screenW && this.state.scrollViewScrollDirection == SCROLLVIEW_DIRECTION_LEFT) ?
                                            <AsyncImage
                                                source={{ uri: getImgUrl(item.url) }}
                                                defaultSource={require('source/image/icon_car_default.png')}
                                                style={styles.carPics}
                                                resizeMode="cover"
                                            />
                                            :
                                            <View style={styles.carPics} />
                                    }
                                </View>
                            </TouchableOpacity>
                        )
                    })
                    }
                </ScrollView>
                {
                    this.props.carPics && this.props.carPics.length > 0 ?
                        <View style={styles.bottomnumberbg} >
                            <Text style={styles.bottomnumberpic}>{this.state.currentImg + '/' + this.props.carPics.length}</Text>
                        </View>
                        :
                        null
                }

            </View>
        );
    }

    morepic(index) {
        if (this.props.morePicHandler) {
            this.props.morePicHandler(index);
        }
    }

    // 图片滑动
    _onScroll(e) {
        //获取滑动的距离
        this.setState({
            offetX: e.nativeEvent.contentOffset.x
        })
        if (this.state.scrollViewStartOffsetX < e.nativeEvent.contentOffset.x) {
            //手势往左滑动，ScrollView组件往右滚动
            this.setState({
                scrollViewScrollDirection: SCROLLVIEW_DIRECTION_RIGHT
            })
        } else if (this.state.scrollViewStartOffsetX > e.nativeEvent.contentOffset.x) {
            //手势往右滑动，ScrollView组件往左滚动
            this.setState({
                scrollViewScrollDirection: SCROLLVIEW_DIRECTION_LEFT
            })
        }

        var offsetX = e.nativeEvent.contentOffset.x;
        var currentPage = Math.ceil((offsetX + screenW / 2.0) / screenW);
        this.setState({
            currentImg: currentPage > 0 && currentPage <= this.props.carPics.length ? currentPage : this.state.currentImg
        })
    }

    _onScrollBeginDrag(event) {
        const offsetX = event.nativeEvent.contentOffset.x;
        this.setState({
            scrollViewStartOffsetX: offsetX
        })
    }

    //车辆图片滑动获取index
    onAnimationEnd(e) {
        // var offsetX = e.nativeEvent.contentOffset.x;
        // var currentPage = Math.ceil(offsetX / screenW);

        // this.setState({
        //     currentImg: currentPage + 1
        // })
    }
}

const styles = StyleSheet.create({
    imglistbox: {
        height: screenW * 0.64,
        flexDirection: 'row',
    },
    imgbox: {
        width: screenW,
    },
    carPics: {
        width: screenW,
        height: screenW * 0.64,
        backgroundColor: '#f6f6f6'
    },
    bottomnumberpic: {
        fontSize: 12,
        color: '#ffffff',
    },
    bottomnumberbg: {
        height: 22,
        backgroundColor: 'rgba(0,0,0,0.2)',
        position: 'absolute',
        paddingHorizontal: 10,
        borderRadius: 4,
        bottom: 23,
        right: 15,
        flexDirection: "row",
        alignItems: 'center',
        justifyContent: "flex-start",
    },
})